<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画大饼</title>
    <style>
        #aaa {
            width: 800px;
            height: 500px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="aaa"></div>
</body>
<script src="./a/echarts.min.js"></script>
<script>
    // 先获取
    const aaa = document.querySelector('#aaa')
    // 初始化
    const charts = echarts.init(aaa)
    // 配置图表
    const option = {
        title: {
            text: '这是个大饼~好吃',
            left: 'center'
        },
        toolbar: {
            trigger: 'item'
        },
        legend: {
            origent: 'vertical',
            left: 'left'
        },
        series: [{
            name: '画大饼',
            type: 'pie',
            radius: '70%',
            data: [{
                    value: 111,
                    name: '111'
                },
                {
                    value: 222,
                    name: '222'
                }, {
                    value: 333,
                    name: '333'
                }, {
                    value: 444,
                    name: '444'
                }, {
                    value: 555,
                    name: '555'
                },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowoffsetX: 0,
                    shadowColor: "115, 194, 224"
                }
            }
        }]
    }
    charts.setOption(option)
</script>

</html>